<template>
  <div id="count-chart">
    <h2>
      当日车辆上线总数
    </h2>
    <div class="box box2">
      <span class="icon top-left-icon"></span>
      <span class="icon top-right-icon"></span>
      <span class="icon bottom-left-icon"></span>
      <span class="icon bottom-right-icon"></span>
      <!--第二个盒子-->
      <div class="num">
        <span>{{activeNumber}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapActions} from 'vuex';
  import DateTimeHelper from '../../util/datetime-helper.js'

  export default {
    name: 'timeCarCount',
    data() {
      return {
        // activeNumber: '1,236,145',
        unActiveNumber: 0
      }
    },
    mounted: function() {
      this.getData();
    },
    computed:{
      ...mapGetters({
        historyTotalNum: "homeChart/historyTotalNum",
        formatHistoryTime: "homeChart/selectedTime"
      }),

      activeNumber: function() {
        const str = String(this.historyTotalNum);
        const arr = str.split('').reverse();
        const newArr = [];
        arr.forEach((item, index) => {
          newArr.unshift(item);
          if ((index + 1) % 3 === 0 && index !== (arr.length - 1)) {
            newArr.unshift(',');
          }
        });
        return newArr.join('');
      }

    },
    methods: {
      getData: function() {
        this.$store.dispatch("homeChart/requsetHistoryTotalNum", 
          {
            dateCur: this.formatHistoryTime + '000000',
            dateNext: DateTimeHelper.getNewTimeBySecends(this.formatHistoryTime + '000000', 86400)
          }
        );
      }
    },
    watch: {
      formatHistoryTime: function(newValue, oldValue) {
        this.getData();
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../static/common/common.scss";

  #count-chart {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 10px;
    h2 {
      @include linearTitle;
    }
    .box {
      position: relative;
      box-sizing: border-box;
      padding: 10px;
      &.box1 {
        height: 222px;
      }
      &.box2 {
        height: 56px;
        margin-top: 5px;
      }
      @include borderBlur;
      .icon {
        position: absolute;
        z-index: 10;
        width: 14px;
        height: 14px;
        &.top-left-icon {
          top: -2px;
          left: -2px;
          background: url("../../../static/images/index/top-left.png") no-repeat left top;
        }
        &.top-right-icon {
          top: -2px;
          right: -2px;
          background: url("../../../static/images/index/top-right.png") no-repeat right top;
        }
        &.bottom-left-icon {
          bottom: -2px;
          left: -2px;
          background: url("../../../static/images/index/left-bottom.png") no-repeat left bottom;
        }
        &.bottom-right-icon {
          bottom: -2px;
          right: -2px;
          background: url("../../../static/images/index/right-bottom.png") no-repeat right bottom;
        }
      }
    }
  }

  #online-chart-box {
    width: 100%;
    height: 100%;
  }

  .num {
    span {
      font-size: $font-normal;
      line-height: 34px;
      vertical-align: middle;
      color: #05d6c9;
      line-height: 34px;
      font-size: 26px;
      font-family: ds-digitalbold-webfont;
      letter-spacing: 3px;
    }
  }

</style>
